<template>
  <div class="map-box">
    <div id="map"></div>
    <div style="padding:20px;text-align: left;font-size: 18px;">
    <div>
      <button id="distance">开始测试距离</button>
      <button id="removeGraph">清除图形</button>
    </div>
  </div>
  </div>
</template>
<script setup>
  import { onMounted } from 'vue'
  const loadScript = (url) => {
    return new Promise((resolve, reject) => {
      const script = document.createElement("script");
      script.src = url;
      script.onload = resolve;
      script.onerror = reject;
      document.head.appendChild(script);
    });
  }
  const scripts = [
    'http://1.95.157.217/wmap/wmap.umd.js'
  ]
  async function loadScripts (scripts) {
    for (const url of scripts) {
      try {
        await loadScript(url);
      } catch (err) {
        console.error(`${url} failed:`, err);
      }
    }
  }
  onMounted(() => {
    loadScripts(scripts).then(() => {
      const map = new WMap.Map('map', {
        center: new WMap.LngLat(116.479662,39.996956),
        zoom: 15
      })
      map.on('click', e => {
        console.log(e.lngLat)
      })
      
      const tools = new WMap.Tool(map)
      let distance = document.querySelector('#distance')
      const removeGraph = document.querySelector('#removeGraph')
      const features = [];
      distance.onclick = () => {
        tools.distance()
      }
      
      tools.on('done', e => {
        features.push(e.data.feature)
      })

      removeGraph.onclick = () => {
        features.forEach((feature) => {
          tools.remove(feature)
        })
      }
    })
  })
</script>
<style>
.map-box{
  height: calc(100vh - 20px)
}
#map {
  height: calc(100% - 100px);
}
button + button {
  margin-left: 10px;
}
</style>
